<template>
  <div class="review-search">
    <form action="" method="get" class="form" @submit="submit">
      <div class="form-item direction" ref="direction">
        <label for="direction">Direction: </label>
        <input type="text" v-model="direction_input" list="directions" name="direction" id="direction" @input="directionInput" >
        <datalist id="directions" cssClass="border-color:grey;">
          <option v-for="item in directions" :value="item" :key="item">{{item}}</option>
        </datalist>
      </div>
      <div class="form-item" ref="publication">
        <label for="publication">Publication: </label>
        <input type="text" name="publication" list="publications" id="publication" v-model="publication_input" @input="publicationInput" >
        <datalist id="publications" cssClass="border-color:grey;">
          <option v-for="item in publications" :value="item" :key="item">{{item}}</option>
        </datalist>
      </div>
      <div class="form-button">
        <input type="submit" value="Submit">
      </div>
    </form>
  </div>
</template>

<script>
import {
  directionsReq,
  publicationsReq,
  reviewRecommendReq
} from '@/requests/reviewReq.js';

export default {
  name: "ReviewSearch",
  props: {

  },
  data() {
    return {
      direction_input: '',
      publication_input: '',
      directions: [],
      publications: []
    };
  },
  computed: {

  },
  mounted() {
  },
  watch: {

  },
  methods: {
    directionInput(e) {
      this.direction_input = this.direction_input.replace(/^\s*/,"");
      if (this.direction_input.length >= 2) {
        const prefix = this.direction_input;
        this.$refs.direction.classList.add('loading');
        directionsReq({
          prefix
        }).then((res) => {
          this.directions = res.data.data.directions;
        }).catch((err) => {
        }).finally(() => {
          this.$refs.direction.classList.remove('loading');
        })
      }
    },
    publicationInput(e) {
      this.publication_input = this.publication_input.replace(/^\s*/,"");
      if (this.publication_input.length >= 2) {
        const prefix = this.publication_input;
        this.$refs.publication.classList.add('loading');
        publicationsReq({
          prefix
        }).then((res) => {
          this.publications = res.data.data.publications;
        }).catch((err) => {
        }).finally(() => {
          this.$refs.publication.classList.remove('loading');
        })
      }
    },
    submit(e) {
      console.log(e);
      e.preventDefault();
      this.$emit('load');
      reviewRecommendReq({
        direction: this.direction_input,
        publication: this.publication_input,
        limit: 20
      }).then((res) => {
        this.$emit('loaded', res.data.data.authors);
      }).catch((err) => {
        console.log(err);
      })
    }
  },
  components: {
  },
};
</script>

<style scoped lang="scss">
.review-search {
  >.form {
    display: grid;
    grid-template-columns: 1fr 2fr 100px;
    grid-column-gap: 30px;
    @media screen and (max-width: 800px){
      grid-template-columns: 1fr;
      grid-column-gap: 0;
    }
    >* {
      margin-bottom: 12px;
    }

    >.loading {
      &::after {
        opacity: 1 !important;
      }
    }

    >.form-item {
      position: relative;
      display: flex;
      justify-content: space-between;
      &::after {
        position: absolute;
        content: 'loading';
        right: 30px;
        top: 50%;
        font-size: 10px;
        color: darkgray;
        transform: translateY(-50%);
        transition: .25s ease-in-out;
        opacity: 0;
      }
      >label {
        width: 100px;
        display: flex;
        align-items: center;
      }
      >input, >textarea {
        flex: 1;
        padding: 4px 10px;
      }
    }

    >.form-button {
      display: flex;
      justify-content: flex-end;
      >input {
        padding: 10px 20px;
        color: white;
        background: #a0ab00;
        padding: 7px 22px 8px 23px;
        border-radius: 2px;
        border: 1px solid gainsboro;
        transition: .25s ease-in-out;

        &:hover {
          cursor: pointer;
          color: #000000;
          background: #a0ab009d;
        }
      }
      
    }
  }
}
</style>
